iT邦幫忙

DAY 1
10

AngularJS系列 第 1

使用 AngularJS 心得 Day 1 - 繫結資料超方便

  • 分享至 

  • xImage
  •  

在第一次參加 AngularJS 的聚會,就被那將 JSON 資料綁定在 HTML 中,以及即時 input 、 output ,卻沒有寫幾行 code 嚇到了。之後幾天(不敢放話 30 天),就把我學習的過程記錄起來。但當然難免會有遺漏或是錯誤的部分,也懇請各位朋友能夠不吝指教 =D
首先當然是先到 AngularJS (以下簡稱 ng )官網下載,看是要 Minified 、 UnCompressed 都有,官網也有提供 CDN 的使用。

依照先進的說法,Stable 跟 Unstable 其實都是可以正常運作的,但我忘了其中有什麼差異 :'(

載入 ng

好的,接著將 .js 檔引用至網頁當中

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>

設置 Module 、 Controller

首先,要先讓 ng 知道他所能管轄的範圍(主 Module )為何,所以必須在 HTML 當中,設定 ng-app ;另外,如果要利用 ng 去改變 web 的一些狀態、資料,就要將邏輯寫至 Controller ,所以必須另外在 HTML 中設定 ng-controller

ng-app 所涵蓋的範圍中,會經過初始的編譯。

編譯過後,如果要再異動,就是看 ng-controller 所涵蓋的範圍。

<!doctype html>
<html lang="zh-tw" ng-app="myApp">


  <meta charset="UTF-8">
  <title>Day 01</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>



  <div>
    <p>{{data}} ng.</p>
  </div>
  <div ng-controller="myCtrl">
    <p>{{data}} ng.</p>
  </div>
  <script>
  angular.module('myApp', [])
    .controller('myCtrl', ['$scope',
      function($scope) {
        $scope.data = 'Hello';
      }
    ]);
  </script>

Day 01

由上述範例可知,第一個 p Tag 因為未被包含在 ng-controller 之中,所以並未顯示 hello ;而第二個 p Tag 因為被包在 ng-controller 中 ,所以 hello 就會被顯示出來。

解析

*****ng 在 HTML 中,若是搜索到有 {{}} 所組成的 code ,就會去做解析,他會去查 controller 中的 scope ,是否有該屬性可以應對。就如同我範例中的 HTML code {{data}} ,因為我在 controller 也設定了 $scope.data = 'Hello'; ,於是 ng 就會自動幫我將值綁定在 <p>{{data}} ng.</p> ,而變成 <p>Hello ng.</p>

*****在 JavaScript 中所寫的 angular.module('myApp', []) ,第一個參數所帶入的就是在 html Tag 中 ng-app 的值 myApp ,也就是此 web(application) 的名稱。第二個參數就是可用來注入其它 module ,這個容我之後再介紹 =D。

*****在 JavaScript 中所寫的 .controller('myCtrl', ['$scope', function($scope) {$scope.data = 'Hello';}]); ,controller 第一個參數是 html code 當中 ng-controller 的值,也就是此 web(application) 的主要邏輯 function 名稱。第二個參數放置你所想要使用的 service 及執行的 function 。

*****而 $scope 可以說是 ng 中最基本的 service ,它可是 html 與 controller 之間的橋樑,由本範例中可以看到,若是 html 中的變數與 controller 中的 $scope 屬性配對成功, ng 就會自動完成繫結。

說來慚愧,我寫 front-end 已經一年多, ng 是我第一次使用的 framework ,以前大多是使用 jQuery ,再加上我不是資訊本科系出身(先消毒 =D ),若是有說錯的觀念、或是錯誤的用法,也請各位高手鞭小力一點。

此文同步更新於 EdenYeh's GitHub
歡迎各位多給我些指教,我會虛心學習的 =D

PS: 手動從 Markdown 轉 BBCode ,好蛋疼啊,排版也變好醜 :'(


下一篇
使用 AngularJS 心得 Day 2 - 雙向繫結( ng-model, ng-bind )
系列文
AngularJS4
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
CalvinKuo
iT邦大師 7 級 ‧ 2013-09-23 13:55:04

沙發拍手

葉宇霖 iT邦新手 4 級 ‧ 2013-09-23 14:02:03 檢舉

謝謝謝謝

0
SunAllen
iT邦研究生 1 級 ‧ 2013-09-23 14:06:17

其實我不懂JSON是什麼臉紅

最近實在抽不出時間去學習新的東西哭哭

請問大大,有那個網站專門介紹JSON嗎??

0
lalabear
iT邦新手 2 級 ‧ 2013-09-23 14:47:58

站上有一篇入門好文
http://ithelp.ithome.com.tw/question/10086603

正規的介紹在這裡
http://www.json.org/json-zh.html

SunAllen iT邦研究生 1 級 ‧ 2013-09-23 14:53:52 檢舉

謝謝^^lalabear大大

SunAllen iT邦研究生 1 級 ‧ 2013-09-23 14:54:57 檢舉

暈暈暈 我還太菜...

葉宇霖 iT邦新手 4 級 ‧ 2013-09-23 19:56:02 檢舉

我雖然會使用 但也只是一知半解
謝謝 lalabear 提供的資源
謝謝謝謝

0
yiying
iT邦新手 1 級 ‧ 2013-09-23 16:14:40

果然強者!

葉宇霖 iT邦新手 4 級 ‧ 2013-09-23 20:00:02 檢舉

謝謝 win 的抬愛
我還要跟妳多多學習啊
開心開心

我要留言

立即登入留言